
import { useEffect, useRef } from 'react';
import { Popover } from 'antd';
import './index.scss';

interface Props {
  size: number;
  graphics: Array<unknown>;
  data: Array<unknown>;
}
export default function Indicator(props: Props) {

  const { graphics = [], data = [], size } = props;
  const rule = {
    0: 'gray',
    1: 'red',
    2: 'green'
  }
  const getFill = (value: number) => {
    return rule[value]
  }

  const content = (
    <div>
      <p>Content</p>
      <p>Content</p>
    </div>
  );

  return (
    <div className='flex flex-wrap justify-center flex-row gap-2'>

        {
          graphics.map(({ key, icon }) => {
            const { value } = data.find(item => item.key === key);
            return (
              <Popover content={content} title="Title">
                <div className='rounded-full p-1 lamp ' style={{ width: `${size}px`, height: `${size}px` }}>
                  <svg
                    t="1722827464260" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1128"
                    xmlns:xlink="http://www.w3.org/1999/xlink" className='size-full' fill={getFill(value)}>
                    {
                      icon
                    }
                  </svg>
                </div>
              </Popover>


            )
          })
        }
      </div>
  );
}
